<template>
    <view class="container">
        <div class="box">
            <div class="basemsgbox">
                <div class="companynamebox">
                    <div class="companyname">{{ companyName }}</div>
                    <div class="tag">{{ type }}</div>
                </div>
                <div class="msginfo">
                    <div class="infobox">
                        <div class="lable">选择保司：</div>
                        <div class="content">{{ insurecompany }}</div>
                    </div>
                    <div class="infobox">
                        <div class="lable">时间区间：</div>
                        <div class="content">{{ timearr[0] }}-{{ timearr[1] }}</div>
                    </div>
                </div>
            </div>
            <div class="line">
                详细信息
            </div>
            <div class="detailmsgbox">
                <div class="chooseitem">
                    <div class="choosetit">选择方案：</div>
                    <div class="choosecontent" @click="toggle('top')"><span :class="{ dark: planName != '' }">{{
                        planName === '' ? '点击选择客户方案' : planName }}</span><img class="more-img"
                            src="@/static/score/more.png" alt=""></div>
                </div>
                <div class="bacline"></div>
                <div class="chooseitem">
                    <div class="choosetit">选择派遣单位：</div>
                    <div class="choosecontent" @click="chooseplan"><span
                            :class="{ text: true, dark: dispatchingAgencylist.length !== 0 }">{{
                                dispatchingAgencylist.length === 0 ? '选择需要出具的被派遣单位' : dispatchingAgencylist[0].serveCompanyName
                                + '等' + dispatchingAgencylist.length + '家' }}</span><img class="more-img"
                            src="@/static/score/more.png" alt="">
                    </div>
                </div>
                <div class="bacline" v-if="showlevel"></div>
                <div class="chooseitem" v-if="showlevel">
                    <div class="choosetit">风险工种等级：</div>
                    <div class="choosecontent" @click="togglec('bottom')"><span :class="{ dark: fxdjflag.length !== 0 }">
                            <span v-if="fxdjflag.length === 0">点击选择风险工种等级</span>
                            <span v-else>
                                <span v-for="(j, k) in fxdjflag" :key="k">{{ j }}级，</span>
                            </span>
                        </span><img class="more-img" src="@/static/score/more.png" alt=""></div>
                    <!-- <div class="choosetit">风险工种等级：</div>
                    <picker @change="bindPickerChange" :value="levelindex" :range="levelarray">
                        <view class="choosecontent">
                            <view :class="{ text: true, dark: levelindex !== null }">{{
                                levelindex === null ? '选择需要出具的被派遣单位' : levelarray[levelindex] }}</view><img class="more-img"
                                src="@/static/score/more.png" alt="">
                        </view>
                    </picker> -->
                </div>
            </div>
            <div class="line">信息筛选</div>
            <div class="msgscreenbox">
                <div class="toptitle">导出内容筛选：</div>
                <div class="swipbox">
                    <div class="lable">去重导出</div>
                    <div class="swip">
                        <switch color="#3E5FF5" :checked="RemoveDuplicatesflag" @change="changeRemoveDuplicatesflag" />
                    </div>
                </div>
                <div class="bacline"></div>
                <div class="swipbox">
                    <div class="lable">当前在保</div>
                    <div class="swip">
                        <switch color="#3E5FF5" :checked="underWarrantyflag" @change="changeunderWarrantyflag" />
                    </div>
                </div>
            </div>
        </div>
        <uni-popup ref="popups" background-color="rgba(0,0,0,0)">
            <view class="popup-content" :class="{ 'popup-height': typesc === 'left' || typesc === 'right' }">
                <div class="popupstop">
                    <div></div>
                    <div @click="popussure">确定</div>
                </div>
                <scroll-view scroll-y="true" style="height: 465rpx;" bindscrolltoupper="upper" bindscrolltolower="lower">
                    <div class="top">选择风险等级（可多选）</div>
                    <div class="listitem" v-for="(ele, index) in levelarray" :key="index"
                        @click="choosefxdj(index, ele.name, ele.value)">
                        <div class="company"><span>{{ ele.name }}</span></div>
                        <div class="imgbox" v-show="ele.status"><img class="img" src="@/static/selected.png" alt="">
                        </div>
                    </div>
                </scroll-view>
            </view>
        </uni-popup>
        <uni-popup ref="popup" background-color="rgba(0,0,0,0)">
            <view class="popup-content" :class="{ 'popup-height': typesc === 'left' || typesc === 'right' }">
                <scroll-view scroll-y="true" style="height: 465rpx;" bindscrolltoupper="upper" bindscrolltolower="lower"
                    bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
                    <div class="top">选择方案</div>
                    <div v-show="type === '日日保'">
                        <div class="listitem" v-for="(ele, index) in insurecompanylist" :key="index"
                            @click="chooseplans(index, ele.planName, ele.planCode)">
                            <div class="company"><span>{{ ele.planName }}</span><span class="count">{{ ele.staffCount
                            }}人</span></div>
                            <div class="imgbox" v-show="planflag === index"><img class="img" src="@/static/selected.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                    <div v-show="type === '长期保'">
                        <div class="listitem" v-for="(ele, index) in insurecompanylist" :key="index"
                            @click="chooseplans(index, ele.dictLabel, ele.dictValue)">
                            <div class="company">{{ ele.dictLabel }}<span class="count">{{ ele.dictSort }}人</span></div>
                            <div class="imgbox" v-show="planflag === index"><img class="img" src="@/static/selected.png"
                                    alt="">
                            </div>
                        </div>
                    </div>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
    <view class="btnbox" @click="nextstep">
        <view class="btn">下一步</view>
    </view>
</template>
<script setup lang="ts" >
import { getlongplanapi, getinsurperiodoccupationlevelapi } from '@/api/insureProve'
import user from '@/utils/user';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { getCurrentInstance, onMounted, ref } from 'vue';
const timearr = ref([])
const insurecompany = ref('')
const insurecompanycode = ref('')
const type = ref('')
const companyName = ref('')
const companyid = ref(0)
const planflag = ref(-1)
const fxdjflag = ref<any>([])
const dispatchingAgencylist = ref([])
const showlevel = ref(false)
const levelindex = ref<any>(null)
const levelarray = ref<any>([{ name: '1级', value: 1, status: false }, { name: '2级', value: 2, status: false }, { name: '3级', value: 3, status: false }, { name: '4级', value: 4, status: false }, { name: '5级', value: 5, status: false }, { name: '6级', value: 6, status: false }, { name: '7级', value: 7, status: false }, { name: '8级', value: 8, status: false }, { name: '9级', value: 9, status: false }, { name: '10级', value: 10, status: false }])
const bindPickerChange = (val: any) => {
    console.log(val)
    levelindex.value = Number(val.detail.value)
    console.log(sendlevelarray.value[Number(val.detail.value)])
}
onLoad(async (options: any) => {
    let userInfo = JSON.parse(decodeURIComponent(options.info));
    console.log('userInfo', userInfo);
    timearr.value = userInfo.timearr
    insurecompany.value = userInfo.insurecompany
    insurecompanycode.value = userInfo.insurecompanycode
    companyid.value = userInfo.companyid
    companyName.value = userInfo.companyName
    type.value = userInfo.type
    if (userInfo.insurecompanycode === "period_003_yg") {
        // getinsurperiodoccupationlevelapi().then((res: any) => {
        //     console.log(res, 'fhsfghuysghiudhijn')
        //     levelarray.value = res.map((ele: any, i: number) => {
        //         return ele.dictLabel
        //     })
        showlevel.value = true
        // })
    }
    if (userInfo.type === '日日保') {
        console.log('日日保')
        insurecompanylist.value = userInfo.planarr
    } else if (userInfo.type === '长期保') {
        console.log('长期保');
        let res = await getlongplanapi({ insureCompany: userInfo.insurecompanycode, companyId: companyid.value, startTime: timearr.value[0], endTime: timearr.value[1] })
        console.log(res)
        insurecompanylist.value = res
    }
})
onShow(() => {
    dispatchingAgencyids.value = []
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; // 当前页的实例
    console.log(currPage.$vm.value, '1221212121')
    if (currPage.$vm.value.arr) {
        dispatchingAgencylist.value = Array.from(currPage.$vm.value.arr)
        Array.from(currPage.$vm.value.arr).forEach((ele: any, index: any) => {
            dispatchingAgencyids.value.push(ele.serveCompanyId)
        })
    }
})
const dispatchingAgencyids = ref<any>([])
onMounted(() => {
    currentInstance.value = getCurrentInstance()
})
const chooseplans = (index: number, name: string, code: string) => {
    planflag.value = index
    planName.value = name
    planCode.value = code
    popup.value.close()
    // currentInstance.value.ctx.$refs.popup.close()
}
const popussure = () => {
    popups.value.close()
}
const choosefxdj = (index: number, name: string, code: string) => {
    fxdjflag.value = []
    levelarray.value[index].status = !levelarray.value[index].status
    // if (levelarray.value[index].status) {
    //     fxdjflag.value.push(code)
    // } else {
    //     var j: any = fxdjflag.value.findIndex((ele: any) => ele == code)
    //     fxdjflag.value.splice(j, 1)
    // }
    levelarray.value.forEach((ele: any, i: any) => {
        if (ele.status === true) {
            fxdjflag.value.push(ele.value)
        }
    })
    console.log(fxdjflag.value);
}
const levelres = ref<any>([])
const planName = ref('')
const planCode = ref('')
const insurecompanylist = ref<any>([])
const currentInstance = ref<any>('')
const types = ref('center')
const typesc = ref('center')
const toggle = (type: any) => {
    console.log(type)
    types.value = type
    popup.value.open(type)
    // currentInstance.value.ctx.$refs.popup.open(type)
}
const togglec = (type: any) => {
    // console.log(type)
    typesc.value = type
    popups.value.open(type)
    // currentInstance.value.ctx.$refs.popup.open(type)
}
const RemoveDuplicatesflag = ref(false)
const underWarrantyflag = ref(false)
// 当前在保
const changeunderWarrantyflag = (e: any) => {
    console.log(e.detail.value);
    underWarrantyflag.value = e.detail.value
}
// 去重导出
const changeRemoveDuplicatesflag = (e: any) => {
    console.log(e.detail.value);
    RemoveDuplicatesflag.value = e.detail.value
}
const chooseplan = () => {
    uni.navigateTo({
        url: "/packageInsureProve/pages/chooseunit/index?id=" + companyid.value + '&type=' + type.value + '&timearr=' + timearr.value
    })
}
const popup = ref()
const popups = ref()
// 下一步
const nextstep = () => {
    console.log('下一步1')
    if (planName.value == '') {
        uni.showToast({
            title: "请选择方案",
            icon: "none"
        })
        return
    }
    if (dispatchingAgencylist.value.length == 0) {
        uni.showToast({
            title: "请选择派遣单位",
            icon: "none"
        })
        return
    }
    if (insurecompanycode.value === 'period_003_yg') {
        if (fxdjflag.value.length == 0) {
            uni.showToast({
                title: "风险工种等级",
                icon: "none"
            })
            return
        }
    }
    let i = ''
    if (showlevel.value) {
        i = levelindex.value <= 3 ? 3 : levelindex.value
    }
    const info = {
        timearr: timearr.value,
        companyid: companyid.value,
        type: type.value,
        insurecompanycode: insurecompanycode.value,
        planCode: planCode.value,
        underWarrantyflag: underWarrantyflag.value,
        RemoveDuplicatesflag: RemoveDuplicatesflag.value,
        dispatchingAgencyids: dispatchingAgencyids.value,
        companyPlanName: planName.value,
        // level: i,
        occupationLevel: fxdjflag.value.length == 0 ? '' : fxdjflag.value.join(',')
    }
    uni.navigateTo({
        url: "/packageInsureProve/pages/indureProveChoosePerson/index?info=" + encodeURIComponent(JSON.stringify(info))
    })
}
</script>
<style lang="scss" scoped>
.line {
    color: #9497B1;
    font-size: 28rpx;
    margin: 32rpx 0;
}

.box {
    background-color: #FAFAFC;
    min-height: 100vh;
    padding: 32rpx 32rpx 0;

    .msgscreenbox {
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx;
        background-color: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .toptitle {
            color: #565868;
            font-size: 28rpx;
        }

        .swipbox {
            width: 100%;
            box-sizing: border-box;
            margin-top: 32rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .lable {
                color: #202536;
                font-size: 32rpx;
            }
        }
    }

    .detailmsgbox {
        width: 100%;
        box-sizing: border-box;
        padding: 32rpx;
        background-color: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .chooseitem {
            width: 100%;
            box-sizing: border-box;

            .choosecontent {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #9497B1;
                font-size: 32rpx;
                margin-top: 32rpx;
            }

            .choosetit {
                color: #565868;
                font-size: 28rpx;
            }
        }
    }

    .basemsgbox {
        width: 100%;
        min-height: 226rpx;
        box-sizing: border-box;
        padding: 32rpx;
        background-color: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;

        .msginfo {
            width: 100%;
            box-sizing: border-box;

            .infobox {
                display: flex;
                align-items: center;
                margin-top: 24rpx;

                .lable {
                    color: #9497B1;
                    font-size: 28rpx;
                    margin-right: 12rpx;
                    width: 140rpx;
                    box-sizing: border-box;
                }

                .content {
                    color: #202536;
                    font-size: 28rpx;

                }
            }
        }

        .companynamebox {
            padding-bottom: 22rpx;
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #F4F4F7;

            .tag {
                width: 104rpx;
                height: 40rpx;
                font-size: 24rpx;
                color: #3E5FF5;
                padding: 8rpx 16rpx;
                box-sizing: border-box;
                margin-left: 24rpx;
                background-color: #EBEFFE;
                display: flex;
                align-items: center;
                border-radius: 4rpx 4rpx 4rpx 4rpx;
            }

            .companyname {
                color: #202536;
                font-weight: 600;
                font-size: 30rpx;
            }
        }
    }
}

.btnbox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 167rpx;
    background-color: #FFFFFF;
    padding: 12rpx 30rpx;

    .btn {
        box-sizing: border-box;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background-color: #3E5FF5;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        color: #FFFFFF;
        font-size: 32rpx;
    }
}

.more-img {
    width: 50rpx;
    height: 35rpx;
}

.bacline {
    width: 100%;
    height: 2rpx;
    opacity: 0.1;
    background-color: #9497B1;
    margin: 16rpx 0 32rpx;
}

.popup-content {
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    padding: 60rpx 60rpx 30rpx 60rpx;
    max-height: 465;
    overflow-y: scroll;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;

    .top {
        font-size: 32rpx;
        color: #202536;
        font-weight: 700;
    }

    .listitem {
        display: flex;
        align-items: center;
        height: 88rpx;
        justify-content: space-between;

        .imgbox {
            width: 32rpx;
            height: 32rpx;

            .img {
                width: 100%;
                height: 100%;
            }
        }

        .company {
            color: #565868;
            font-size: 28rpx;
        }
    }
}

.text {
    flex: 1;
    width: 100%;
    /*第一步： 溢出隐藏 */
    overflow: hidden;
    /* 第二步：让文本不会换行， 在同一行继续 */
    white-space: nowrap;
    /* 第三步：用省略号来代表未显示完的文本 */
    text-overflow: ellipsis;
}

.dark {
    color: #202536 !important;
}

.count {
    font-size: 28rpx;
    display: inline-block;
    margin-left: 24rpx;
    color: #9497B1;
}

.popupstop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    color: #3E5FF5;
    margin-top: -30rpx;
}
</style>
